<template>
  <div class="parent-list">
    <div class="parent-item" v-for="(par, index) in parentingList" :key="index" @click="$router.push('/feeds/' + par.id)">
      <div class="activity-pic">
        <van-image :src="par.covers[0].url">
          <template v-slot:loading>
            <img src="@/assets/goImages/8P.png" alt="" />
          </template>
        </van-image>
      </div>
      <div class="parent-info">
        <span class="title">
          <span class="category" :class="{ jd: par.category_desc == '景点', zl: par.category_desc == '展览', xxyl: par.category_desc == '休闲娱乐', yyh: par.category_desc == '音乐会', hjgj: par.category_desc == '话剧歌剧', live: par.category_desc == 'Live' }">{{ par.category_desc }}</span>
          <span class="remark" v-if="par.remark">{{ par.remark }}</span>
          {{ par.title }}
        </span>
        <span class="address">{{ par.business && par.business.address }}<i v-if="par.business">·</i>{{ par.time }}</span>
        <div class="price-container">
          <div class="price-box">
            <span class="price">{{ par.price_desc }}</span>
            <span class="plus-icon" v-if="par.go_card_discounted_price">
              <van-icon size="16px" color="#C7993A" name="arrow-down" />
            </span>
            <span class="plus-price">{{ par.go_card_discounted_price }}</span>
          </div>
          <div class="view-count">{{ getCount(par.view_count) }}人看过</div>
        </div>
        <div class="source">{{ par.reason_text }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    parentingList: Array
  },
  methods: {
    getCount(count) {
      if (count < 10000) {
        return count
      } else {
        const re = /^\d+\.?\d?/
        let res = count / 10000 + ''
        return parseFloat(res.match(re)) + '万'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.parent-list {
  padding: 0 10px;
  display: flex;
  background-color: #fff;
  flex-direction: column;

  .parent-item {
    display: flex;
    padding-bottom: 10px;
    margin-bottom: 20px;
    background-color: #fff;

    .activity-pic {
      width: 120px;
      overflow: hidden;

      ::v-deep .van-image {
        height: 100%;
        width: 100%;
        img {
          height: 100px;
          width: 100%;
          border-radius: 10px;
        }
      }
    }
    .parent-info {
      padding-left: 5px;
      padding-top: 5px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .title {
        width: 100%;
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis; /*显示为......*/
        -webkit-line-clamp: 2; /*显示为两行，在第二行中显示为.......*/
        display: -webkit-box;
        -webkit-box-orient: vertical;

        .category {
          font-size: 12px;
          padding: 1px 3px;
          border-radius: 3px;
          margin-right: 3px;

          &.jd {
            border: 2px solid #517fc7;
            color: #517fc7;
          }
          &.zl {
            border: 2px solid #e57d4d;
            color: #e57d4d;
          }
          &.xxyl {
            border: 2px solid #c5964c;
            color: #c5964c;
          }

          &.yyh {
            border: 2px solid #db916f;
            color: #db916f;
          }
          &.hjgj {
            border: 2px solid #929d40;
            color: #929d40;
          }
          &.live {
            border: 2px solid #929d40;
            color: #929d40;
          }
        }
        .remark {
          background-color: #d84647;
          color: #fff;
          font-size: 12px;
          font-weight: 500;
          border-radius: 3px;
          padding: 3px 5px;
        }
      }
      .address {
        padding: 7px 0;
        font-size: 12px;
        color: #777;

        i {
          padding: 0 2px;
          font-weight: 900;
        }
      }

      .price-container {
        padding: 5px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price-box {
          font-size: 12px;
          align-items: inherit;
          display: inherit;

          .price {
            color: #1d1c1b;
            font-weight: 600;
            margin-right: 10px;
          }
          .plus-icon {
            height: 16px;
            width: 16px;
            margin-right: 5px;
            background-color: #1d1c1b;
            border-radius: 999px;

            .van-icon {
              font-weight: 700;
              transform: scale(0.6, 1.2);
            }
          }
          .plus-price {
            font-weight: 600;
            color: #c7993a;
          }
        }
        .view-count {
          padding-right: 5px;
          color: #bfbfbf;
          font-size: 12px;
          line-height: 16px;
        }
      }
      .source {
        color: #76c1e7;
        background-color: #f7f9fa;
        padding: 5px 0 10px;
        padding-left: 10px;
        font-size: 12px;
        font-weight: 500;
      }
    }
  }
}
</style>
